@import 'base';

@chart-color: #6ebc45;
@chart-danger: #ed5565;
@chart-border: #dcdcdc;
@d-color-gray: #666;
@d-color-light-gray: #999;

.d-chart-wrap {
  padding: 30px 60px 30px 30px;
}

.d-chart {
  border-bottom: 2px solid @chart-border;
  border-left: 2px solid @chart-border;
  position: relative;
  color: @d-color-gray;
  font-size: 14px;
}

/*横向*/
.d-chart-h {
  .d-chart-item {
    height: 70px;
    position: relative;
    z-index: 88;
    span {
      top: 28.888%;
      height: 42.222%;
      line-height: 170%;
      display: block;
      left: 0;
      position: absolute;
      background-color: @color-default;
      color: @d-color-gray;
      font-size: 12px;
    }
    .d-chart-diff {
      background-color: @color-default;
      border: 1px solid @chart-danger;
      border-radius: 4px;
      color: @chart-danger;
      font-size: 12px;
      height: 42.222%;
      line-height: 150%;
      position: absolute;
      left: -6px;
      display: none;
      text-align: center;
      width: 60px;
      top: 28.88%;
      z-index: 99;
      .opacity(0);
      .transition(all 0.5s ease 0s);
      &.d-diff-success {
        color: @chart-color;
        border-color: @chart-color;
      }
    }
    .d-chart-box {
      background-color: @chart-color;
      left: 0;
      top: 28.88%;
      height: 42.222%;
      position: absolute;
    }
    &:hover {
      .d-chart-diff {
        display: block;
        .animation(fadeInDown .8s .01s ease both);
      }
      .d-chart-box {
        .opacity(.8);
      }
    }
    &.d-chart-danger {
      .d-chart-box {
        background-color: @chart-danger;
      }
    }
    .d-chart-label {
      color: @d-color-light-gray;
      font-size: 13px;
      left: -60px;
      position: absolute;
      text-align: right;
      top: 28.888%;
      height: 42.222%;
      width: 50px;
      line-height: 170%;
    }
  }
  .d-chart-step {
    border-left: 1px dashed @chart-border;
    bottom: 0;
    top: 0;
    left: 0;
    position: absolute;
    span {
      bottom: -25px;
      display: block;
      left: -15px;
      position: absolute;
      text-align: center;
      width: 30px;
      color: @d-color-light-gray;
    }
    &.d-average {
      border-left-color: @chart-danger;
      span {
        color: @chart-danger;
        top: -35px;
        text-align: center;
        left: -18px;
        width: 3em;
      }
    }
  }
}

/*竖向*/
.d-chart-v {
  .d-chart-item {
    float: left;
    height: 100%;
    text-align: center;
    position: relative;
    width: 70px;
    span {
      bottom: 0;
      left: 0;
      text-align: center;
      width: 100%;
      color: @d-color-gray;
      background-color: @color-default;
      z-index: 1;
      position: absolute;
      font-size: 12px;
    }
    .d-chart-diff {
      background-color: @color-default;
      border: 1px solid @chart-danger;
      border-radius: 4px;
      color: @chart-danger;
      font-size: 12px;
      height: 24px;
      line-height: 24px;
      position: absolute;
      left: -6px;
      display: none;
      text-align: center;
      width: 60px;
      z-index: 99;
      .opacity(0);
      .transition(all 0.5s ease 0s);
      &.d-diff-success {
        color: @chart-color;
        border-color: @chart-color;
      }
    }
    .d-chart-box {
      background-color: @chart-color;
      bottom: 0;
      left: 50%;
      margin-left: -21.111%;
      position: absolute;
      width: 42.222%;
      height: 0;
      z-index: 88;
    }
    &:hover {
      .d-chart-diff {
        display: block;
        .animation(fadeInDown .8s .01s ease both);
      }
      .d-chart-box {
        .opacity(.8);
      }
    }
    &.d-chart-danger {
      .d-chart-box {
        background-color: @chart-danger;
      }
    }
    .d-chart-label {
      bottom: -25px;
      position: absolute;
      width: 100%;
      font-size: 13px;
      color: @d-color-light-gray;
    }
  }
  .d-chart-step {
    border-top: 1px dashed @chart-border;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
    span {
      left: -45px;
      position: absolute;
      top: -9px;
      display: block;
      text-align: right;
      width: 40px;
      color: @d-color-light-gray;
    }
    &.d-average {
      border-top-color: @chart-danger;
      span {
        color: @chart-danger;
        left: auto;
        right: -56px;
        text-align: center;
        top: -18px;
        width: 3em;
      }
    }
  }
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-30px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}

@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-30px)
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0)
  }
}